<template>
	<view>
		<div class="header"></div>
		<div class="container">
			<div class="profile-section">
				<!-- 用户信息 -->
				<div class="user-info">
					<div class="user-header">
						<div class="user-avatar">
								<img :src="userInfo.img" style="width: 80px; border-radius: 50%; height: 80px;" mode="aspectFit" alt="User Image">
						</div>
						<div class="user-details">
							<div class="user-name">{{ userInfo.username }}</div>
							<div class="user-id">ID: {{ uid }}</div>
						</div>
					</div>
					<div class="user-bio">{{ userInfo.bio }}</div>
				</div>

				<!-- 功能卡片 -->
				<div class="action-cards">
					<div class="action-card" @click="goToMessages">
						<div class="card-header">
							<span class="card-icon">🔔</span>
							<span class="card-count">0</span>
						</div>
						<div class="card-title">消息</div>
					</div>
					<div class="action-card" @click="goToGuanZhu">
						<div class="card-header">
							<span class="card-icon">❤</span>
							<span class="card-count">0</span>
						</div>
						<div class="card-title">关注</div>
					</div>
					<div class="action-card" @click="goToPost">
						<div class="card-header">
							<span class="card-icon">📝</span>
							<span class="card-count">{{ post_num }}</span>
						</div>
						<div class="card-title">帖子</div>
					</div>
					<div class="action-card" @click="goToFavorite">
						<div class="card-header">
							<span class="card-icon">⭐</span>
							<span class="card-count">0</span>
						</div>
						<div class="card-title">收藏</div>
					</div>
				</div>

				<!-- 设置区域 -->
				<div class="settings-section">
					<div class="settings-item" @click="goToSetting">
						<span class="settings-icon">⚙️</span>
						<span>设置</span>
					</div>
					<div class="settings-item" @click="goToAbort">
						<span class="settings-icon">ℹ️</span>
						<span>关于</span>
					</div>
				</div>
			</div>
		</div>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				post_num: 0,
				title: 'Hello', // 页面标题
				hasNavigated: false, // 跳转标志
				userInfo: {
					username: "123",
					bio: "",
					img:"https://pass-apps.oss-cn-shanghai.aliyuncs.com/img.jpg"
				}, // 用户信息
				uid: '', // 用户ID
				isLoading: true, // 加载状态
			};
		},
		async created() {
			if (!this.hasNavigated) {
				this.hasNavigated = true; // 设置跳转标志
				this.uid = uni.getStorageSync('uid'); // 获取本地存储中的uid

				if (!this.uid) {
					// 如果没有uid，跳转到登录页面
					uni.reLaunch({
						url: '/pages/login/login'
					});
				} else {
					// 调用获取用户信息的函数
					this.getUserInfo();
				}
				try {
					const res = await new Promise((resolve, reject) => {
						uni.request({
							url: 'http://14.103.233.198:9999/getpostnum', // 替换为实际的接口
							method: 'POST',
							data: {
								uid: this.uid,
							},
							success: (response) => resolve(response),
							fail: (error) => reject(error),
						});
					});
					if (res.data.success) {
						this.post_num=res.data.num
					} else {
						// 如果没有返回用户信息，可以跳转到登录页面或提示错误
						uni.showToast({
							title: res.data.message,
							icon: 'none',
						});
						uni.reLaunch({
							url: '/pages/tabbar-5/tabbar-5'
						});
					}
				} catch (error) {
					console.error('error:', error);
					uni.showToast({
						title: '请求失败，请稍后再试',
						icon: 'none',
					});
				}
			}
		},
		methods: {
			// 获取用户信息
			async getUserInfo() {
				try {
					const res = await new Promise((resolve, reject) => {
						uni.request({
							url: 'http://14.103.233.198:9999/getUserInfo', // 替换为实际的接口
							method: 'POST',
							data: {
								uid: this.uid,
							},
							success: (response) => resolve(response),
							fail: (error) => reject(error),
						});
					});

					if (res.data) {
						// 假设API返回的数据是用户信息
						this.userInfo = res.data; // 保存用户信息
					} else {
						// 如果没有返回用户信息，可以跳转到登录页面或提示错误
						uni.showToast({
							title: '无法获取用户信息',
							icon: 'none',
						});
						uni.reLaunch({
							url: '/pages/tabbar-5/tabbar-5'
						});
					}
				} catch (error) {
					console.error('获取用户信息失败:', error);
					uni.showToast({
						title: '请求失败，请稍后再试',
						icon: 'none',
					});
				} finally {
					// 加载完成
					this.isLoading = false;
				}
			},
			goToMessages() {
				uni.switchTab({
					url: '/pages/tabbar/tabbar-4/tabbar-4'
				});
			},
			goToGuanZhu() {
				uni.switchTab({
					url: '/pages/tabbar/tabbar-2/tabbar-2'
				});
			},
			goToPost() {
				uni.navigateTo({
					url: '/pages/post/post'
				});
			},
			goToFavorite() {
				uni.navigateTo({
					url: '/pages/favorite/favorite'
				});
			},
			goToSetting() {
				uni.navigateTo({
					url: '/pages/setting/setting'
				});
			},
			goToAbort() {
				uni.navigateTo({
					url: '/pages/abort/abort'
				});
			}
		}
	};
</script>

<style scoped lang="scss">
	.header {
		background: linear-gradient(to bottom, #9b87f5, #7E69AB);
		height: 8rem;
	}

	.container {
		max-width: 480px;
		margin: 0 auto;
		padding: 0 1rem;
	}

	.profile-section {
		margin-top: -4rem;
		padding: 1.5rem;
		animation: fadeIn 0.3s ease-out;
	}

	.user-info {
		background: white;
		border-radius: 1rem;
		padding: 1.5rem;
		margin-bottom: 1rem;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
	}

	.user-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 1rem;
	}

	.user-avatar {
		width: 4rem;
		height: 4rem;
		background-color: #9b87f5;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		color: white;
		font-size: 2rem;
	}

	.user-details {
		flex-grow: 1;
		margin-left: 1rem;
	}

	.user-name {
		font-size: 1.25rem;
		font-weight: 600;
		margin-bottom: 0.25rem;
	}

	.user-id {
		color: #666666;
		font-size: 0.875rem;
	}

	.user-actions {
		display: flex;
		gap: 1rem;
	}

	.action-icon {
		padding: 0.5rem;
		border-radius: 50%;
		cursor: pointer;
	}

	.action-icon:hover {
		background-color: #F6F6F7;
	}

	.action-cards {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 1rem;
		margin: 1.5rem 0;
	}

	.action-card {
		background: white;
		padding: 1rem;
		border-radius: 1rem;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
		cursor: pointer;
		transition: box-shadow 0.2s;
	}

	.action-card:hover {
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	}

	.card-header {
		display: flex;
		justify-content: space-between;
		margin-bottom: 0.5rem;
	}

	.card-icon {
		color: #9b87f5;
	}

	.card-count {
		color: #9b87f5;
		font-size: 0.875rem;
		font-weight: 500;
	}

	.card-title {
		font-weight: 500;
	}

	.settings-section {
		background: white;
		border-radius: 1rem;
		overflow: hidden;
		margin-bottom: 1.5rem;
	}

	.settings-item {
		display: flex;
		align-items: center;
		padding: 1rem;
		border-bottom: 1px solid #F6F6F7;
		cursor: pointer;
	}

	.settings-item:last-child {
		border-bottom: none;
	}

	.settings-item:hover {
		background-color: #F6F6F7;
	}

	.settings-icon {
		color: #666666;
		margin-right: 0.75rem;
	}

	@keyframes fadeIn {
		from {
			opacity: 0;
			transform: translateY(10px);
		}

		to {
			opacity: 1;
			transform: translateY(0);
		}
	}
</style>